<template>
  <div class="boxss">
    <div class="titles">快捷功能</div>
    <div style="height: 100%;">

    
    <div class="grid" :class="gridClass" >
      <template v-for="(item, i) in quickApps.slice(0,11)">
        <div :key="i" @click="goRoute(item)" class="grid-item">
        
          <div class="addimg">
            <img v-if="item.meta" :src="item.meta&&item.meta.iconImg || shalou" alt="">
          </div>
          <div class="names">{{ item.meta.title }}</div>
        </div>
      </template>
      <div class="add-btn grid-item" @click="openAddApps">
        <div>
          <img src="@/assets/img/index/comp6-add.png" alt="">
        </div>
        <div class="names">编辑功能</div>
      </div>
      </div>
    </div>

    <customApps ref="customApps" @saveSuccess="getZhidingApps"></customApps>
  </div>
</template>
<script>
import {
  getuserDataList,
} from "@/api/tenantApis/indexStatistics.js";
import homeApi from "@/api/home/newIndex";
import customApps from "../../components/indexComponents/customApps.vue";
import _ from "lodash";
export default {
  data() {
    return {
      quickApps: [],
      myApps: [],
      shalou: require("../../assets/img/home2/shalou.png"),
      // 响应式相关
      screenWidth: 0,
      screenHeight: 0,
    }
  },
  components: {
    customApps
  },
  computed: {
    routeData() {
      return this.$store.state.permission.routeData;
    },
    // 根据屏幕宽度计算网格列数
    gridColumns() {
      if (this.screenWidth < 768) return 4; // 平板
      if (this.screenWidth < 1024) return 5; // 小桌面
      return 6; // 大桌面
    },
    // 网格样式类
    gridClass() {
      return {
        'grid-tablet': this.screenWidth >= 480 && this.screenWidth < 768,
        'grid-small-desktop': this.screenWidth >= 768 && this.screenWidth < 1024,
        'grid-desktop': this.screenWidth >= 1024
      };
    },
    // 根据屏幕大小调整最大显示项目数
    maxItems() {
      if (this.screenWidth < 768) return 10; // 平板显示10个
      return 11; // 桌面显示11个
    }
  },
  watch: {
    routeData: {
      handler(val) {
        if (val && val.length) {
          this.myApps = this.extractItemsWithoutChildren(val);
          this.getZhidingApps();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.updateScreenSize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    // 更新屏幕尺寸
    updateScreenSize() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    },
    // 处理窗口大小变化
    handleResize() {
      this.updateScreenSize();
    },
    //我的应用 递归取出所有子菜单
    extractItemsWithoutChildren(data) {
      let result = [];

      // 递归函数
      function recurse(items, currentPath) {
        for (let item of items) {
          const itemPath = `${currentPath}${item.path[0] == "/" ||
          (currentPath && currentPath[currentPath.length - 1] == "/")
            ? ""
            : "/"
          }${item.path}`;
          if (!item.children || item.children.length === 0) {
            // 创建对象副本并设置path字段
            if (!item.hidden) {
              result.push({...item, path2: itemPath});
            }
          } else {
            recurse(item.children, itemPath);
          }
        }
      }

      // 从根数据开始递归，根级项的path以'/'开头
      recurse(data, "");

      return result;
    },
    // 获取自定义置顶应用
    getZhidingApps() {
      this.quickApps = [];
      getuserDataList({type: 2})
        .then((res) => {
          let apps = [];
          if (res.rows && res.rows.length && this.myApps.length) {
            res.rows.forEach((r) => {
              this.myApps.forEach((r2) => {
                if (r2.name && r2.name == r.dataKey) {
                  apps.push(r2);
                }
              });
            });
            this.quickApps = [...apps];
          } else {
            let resData = []
            // 没有自定义 ,展示全部
            this.myApps.forEach((r) => {
              if(r.name == 'Jifenshangcheng' || r.name == 'Detent' || r.name == 'GoodsPool' || r.name=='Heihaochauxn' || r.name=='AiqianContractList' || r.name=='Shimingtest') {
               resData.push(_.cloneDeep(r));
              }
            });
            this.quickApps = [...resData];
             if (this.quickApps.length >= 11) this.quickApps.length = 11;
           
          }
        })
        .catch((err) => {
        });
    },
    // 打开我的应用
    openAddApps() {
      this.$refs.customApps.open(this.quickApps, this.routeData);
    },

    async getMyApps() {
      const res = await homeApi.getMyApps();
      this.myApps = res.data;
    },
    // 菜单跳转
    goRoute(item) {
      if (item.meta.link) {
        window.open(item.meta.link);
      } else {
        let query = "";
        if (item.query) {
          query = JSON.parse(item.query);
        }
        this.$router.push({
          path: item.path2,
          query: query || null,
        });
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import url('./style.css');

.grid {
  flex: 1;
  margin-top: 27px;
  display: grid;
  gap: 40px 25px;
  transition: all 0.3s ease;

  // 默认桌面样式 (6列)
  grid-template-columns: repeat(6, 1fr);
  
  // 小桌面样式 (5列)
  &.grid-small-desktop {
    grid-template-columns: repeat(5, 1fr);
    gap: 35px 22px;
  }
  
  // 平板样式 (4列)
  &.grid-tablet {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    margin-top: 20px;
  }

  .grid-item {
    text-align: center;
    cursor: pointer;
    
    img {
      transition: all 0.3s ease;
    }
    
    &:hover {
      img {
        border-radius: 12px;
        background: #e7e7e7;
        transform: translateY(-5px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

img {
  width: 32px;
  
  // 响应式图片大小
  @media (max-width: 767px) {
    width: 28px;
  }
}

.names {
  font-size: 14px;
  margin-top: 8px;
  color: #000;
  transition: all 0.3s ease;
  
  // 响应式字体大小
  @media (max-width: 1023px) {
    font-size: 13px;
    margin-top: 6px;
  }
  
  @media (max-width: 767px) {
    font-size: 12px;
    margin-top: 5px;
  }
}

.add-btn {
  cursor: pointer;

  .names {
    color: #6C5DD3;
  }
}

.addimg {
  cursor: pointer;
}

// 响应式标题
.titles {
  @media (max-width: 767px) {
    font-size: 16px;
  }
}

// 响应式容器
.boxss {
  @media (max-width: 767px) {
    padding: 10px;
  }
}
</style>

